<template>
	<view class="">

		<u-navbar title="意见反馈" :autoBack="true" :placeholder="true"></u-navbar>

		<view class="container">
			<view class="form">
				<view class="content">
					<view class="textarea-box">
						<view class="textarea-title">
							意见或建议 <text style="color: red;">*</text>
						</view>
						<textarea class="textarea" maxlength="200" @input="inputHandle" :value="feedBack"
							placeholder="尽可能详细的描述您的问题或建议" cols="30" rows="10"></textarea>
						<view class="remaining-words"><text>{{200 - remainingWords}}</text>/200</view>
					</view>
				</view>

				<view class="imgup-box">
					<view class="imgup-box-title">
						上传照片 ({{imgNum}}/6)
					</view>
					<view class="imgup-box-content">
						<view class="img-item" v-for="item in imgURLArr" key="index">
							<view class="iconfont icon-guanbi remove-img" :data-img="item" @click="removeHandle">

							</view>
							<image class="previewImg" :src="item" mode=""></image>
						</view>
						<view class="imgup-box-content-img" @click="choseImgHandle" wx:if="residue <= 0">
							<view class="iconfont icon-zhaoxiangji"></view>
						</view>
					</view>
				</view>

				<view class="phone-title">
					请留下你的手机号码或邮箱，方便我们联系你
				</view>
				<view class="content1">
					<view class="textarea-box">
						<view class="textarea-title">
							邮箱/电话
						</view>
						<input class="content1-phone" type="text" placeholder="请输入手机" @input="phoneChange" />
					</view>
				</view>


				<view class="button-box">
					<button class="submit-button" @click="upImg">提交</button>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import {
		BaseURL
	} from '../../utils/global.js'
	export default {

		// 页面的初始数据
		data() {
			return {
				feedBack: '', //意见反馈的内容
				userphone: '', //用户手机或邮箱
				imgURLArr: [], //提交图片的url
				residue: 6, //剩余可提交图片张数
				imgNum: 0, //提交图片张数
				renewable: true, //是否还可提交
				remainingWords: 200, //剩余字数
				image: [], //图片
			}
		},

		// 监听页面加载
		onLoad(options) {},

		methods: {
			// 监听输入框输入事件
			inputHandle(e) {
				let _this = this;
				let wordLenght = e.detail.value.length;
				_this.feedBack = e.detail.value;
				_this.remainingWords = 200 - wordLenght;
			},

			// 选择图片handle
			choseImgHandle() {
				let _this = this;
				wx.chooseImage({
					count: this.residue,
					success: res => {

						_this.imgURLArr = [...this.imgURLArr, ...res.tempFilePaths]
						// 计算剩余可提交图片张数
						_this.residue = 6 - this.imgURLArr.length;
						_this.imgNum = this.imgURLArr.length;
					}
				})
				console.log(_this.imgURLArr);
			},

			// 移除图片handle  
			removeHandle(e) {
				console.log(e);
				let _this = this;
				let removeImg = e.currentTarget.dataset.img;
				let list = _this.imgURLArr;

				// 循环删除选择的图片
				for (let i = 0; i < list.length; i++) {
					if (list[i] == removeImg) {
						list.splice(i--, 1)
						_this.imgURLArr = list
						// 计算剩余可提交图片张数
						_this.residue = 6 - this.data.imgURLArr.length;
						_this.imgNum = this.imgURLArr.length;
					}
				}


			},

			phoneChange(e) {
				this.userphone = e.detail.value;
			},

			// 表单内容提交
			async submitHandle() {
				let _this = this;
				let params = {
					cont: _this.feedBack,
					image: _this.image,
					userphone: _this.userphone,
					uid: '',
				}
				let res = await this.$api.addfeedback(params);

				if (res.code == 1) {
					_this.feedBack = '';
					_this.userphone = '';
					wx.$toast('提交成功！')
				}
			},

			// 上传图片
			upImg() {
				let _this = this;
				// 判断是否输入全为空格
				if (this.feedBack.length == 0) {
					wx.showToast({
						title: '意见或建议内容不可为空！',
						icon: 'none'
					})
					this.imgNum = 0;
					this.imgURLArr = [];
					return
				}
				if (_this.imgURLArr.length == 0) {
					_this.submitHandle();
				}
				uni.uploadFile({
					url: BaseURL + '/api/common/upload',
					filePath: _this.imgURLArr[0],
					name: 'file',
					formData: {
						'type': 'image'
					},
					success: (res) => {
						_this.image = [..._this.image, JSON.parse(res.data).data.fullurl];
						if (_this.imgURLArr.length > 1) {
							this.imgURLArr.shift();
							_this.upImg()
						} else {
							this.imgURLArr.shift();
							_this.submitHandle();
						}
					}
				});
			},



		},


	}
</script>

<style lang="scss" scoped>
	/* pages/user/feedback/feedback.wxss */
	.form {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.content {
		margin: 32rpx 0 0 0;
		background-color: white;
		padding: 20rpx 20rpx 50rpx 20rpx;

	}

	.content1 {
		background-color: white;
		padding: 10rpx 20rpx;

		&-phone {
			height: 60rpx;
			line-height: 60rpx;
		}
	}

	// 图片
	.imgup-box {
		margin: 32rpx 0 0rpx 0;
		background-color: white;
		padding: 20rpx;

		&-title {
			line-height: 60rpx;
			height: 60rpx;
			color: #666;
		}

		&-content {
			display: flex;
			overflow-x: scroll;

			.imgup-box-content-img {
				width: 120rpx !important;
				height: 120rpx;
				border-radius: 10rpx;
				border: 1rpx dashed #999;
				text-align: center;
				margin: 10rpx;

				.icon-zhaoxiangji {
					font-size: 54rpx;
					margin-top: 30rpx;
					color: #2e82f5;
				}
			}

			.previewImg {
				width: 120rpx;
				height: 120rpx;
				margin: 10rpx;
			}
		}
	}

	.textarea {
		// background-color: #f1f1f1;
		width: calc(100% - 0rpx);
		padding: 24rpx 0rpx 50rpx 0rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333;
		height: 100rpx;
	}

	.textarea-title {
		font-size: 26rpx;
		line-height: 60rpx;
		height: 60rpx;
		color: #777;
	}

	.img-box {
		margin: 32rpx 0 40rpx 0;
		display: flex;
		/* justify-content: space-around; */
	}


	.img-celler {
		height: 120rpx;
		width: 160rpx;
		margin-right: 48rpx;
		position: relative;
	}

	.img {
		height: 120rpx;
		width: 160rpx;
	}

	.icon-guanbi {
		position: absolute;
		color: #FF8900;
		right: 2rpx;
		top: 2rpx;
		/* 隐藏 */
		/* display: none;   */
	}

	.img-cell {
		height: 120rpx;
		width: 160rpx;
		border: 4rpx solid #f1f1f1;
		text-align: center;
		line-height: 120rpx;
		width: 160rpx;
		color: #999;
	}

	.icon-xiangji {
		font-size: 48rpx;
	}

	.button-box {
		margin: 20rpx 32rpx 12rpx 32rpx;
		position: absolute;
		bottom: 0;
		width: calc(100% - 64rpx);
	}

	.remaining-words {
		color: #333;
		position: absolute;
		right: 40rpx;
		/* bottom:0rpx; */
		font-size: 28rpx;
		color: #333;
	}


	.submit-button {
		background-color: #111;
		color: white;
		border: none;
		border-radius: 50rpx;
		width: 100%;
	}

	.submit-button-no {
		background-color: #C9CCD4 !important;
		border: none;
		color: #999999 !important;
		border-radius: 50rpx;
	}

	.phone-title {
		margin-left: 20rpx;
		line-height: 80rpx;
		color: #666;
	}

	.removeBtn {
		position: absolute;
		right: 10rpx;
		background-color: rgba(0, 0, 0, 0.5);
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		color: white;
		border-radius: 50rpx;
	}

	.img-item {
		position: relative;

	}

	.remove-img {
		color: #999;
	}
</style>